<template>
	<view class="page-deliveryAdd">
		<view class="box">
			<view class="tit">
				收货人
			</view>
			<uni-easyinput v-model="name" placeholder="默认" @input="input" />
		</view>
		<view class="box">
			<view class="tit">
				联系电话
			</view>
			<uni-easyinput v-model="phone" placeholder="默认" @input="input" />
		</view>
		<view class="box">
			<view class="tit">
				所在地址
			</view>
			<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble"
				@confirm="confirm" @cancel="cancel" :visible="visible" />
			<uni-easyinput v-model="address" placeholder="请选择省市区" readonly @focus="open" />
		</view>
		<view class="box">
			<view class="tit">
				详细备注
			</view>
			<uni-easyinput class="input-container" v-model="remarks" placeholder="默认" @input="input" />
		</view>
		<view class="box">
			<view class="tit">
				是否默认
			</view>
			<checkbox @click="toggleDefaultCheckbox($event.detail.value)" class="store-selector" color="#ffffff"
				activeBackgroundColor="#FFCC33" activeBorderColor="#ffffff"></checkbox>
		</view>
		<button type="primary" class="button" @click="insertAddress">确定</button>
	</view>
</template>
<script>
	import axios from 'axios';
	import service from '../../utils/request.js';
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker';
	export default {
		data() {
			return {
				visible: false,
				maskCloseAble: true,
				str: '',
				defaultValue: '',
				// defaultValue: ['河北省','唐山市','丰南区'],
				column: 3,
				name: '',
				phone: '',
				address: '',
				remarks: '',
				userID: localStorage.getItem("userID"),
				isDefaultChecked: false
			}
		},
		components: {
			cityPicker
		},
		methods: {
			open() {
				this.visible = true
			},
			confirm(val) {
				console.log(val)
				this.address = `${val.provinceName} ${val.cityName} ${val.areaName}`;
				this.visible = false
			},
			cancel() {
				this.visible = false
			},
			toggleDefaultCheckbox(checked) {
				this.isDefaultChecked = !this.isDefaultChecked;
				console.log("是否默认", this.isDefaultChecked)
			},
			input(e) {
				uni.showToast({
					title: e
				})
			},
			iconClick(type) {
				uni.showToast({
					title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
					icon: 'none'
				})
			},
			async insertAddress() {
				try {
					this.userID = localStorage.getItem("userID");
					const response = await service.post('/address/save', { // 你的后端地址
						name: this.name,
						phone: this.phone,
						address: this.address,
						remarks: this.remarks,
						userID: this.userID,
						isDefault: this.isDefaultChecked
					});


					uni.showToast({
						title: '地址保存成功',
						icon: 'success'
					});
					uni.navigateTo({
						url: '/pages/deliveryAddList/deliveryAddList'
					})
				} catch (error) {
					console.error('插入失败:', error);
					uni.showToast({
						title: '地址保存失败',
						icon: 'none'
					});
				}
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: 'data-cityPicker省市区地址选择器！',
				path: '/pages/cityPicker/cityPicker'
			}
		},
		onShareTimeline(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: 'data-cityPicker省市区地址选择器！'
			}
		}
	}
</script>

<style lang="scss" scoped>
	@use "deliveryAdd";
</style>